<script setup lang="ts">
import { ref, computed } from "vue";
import { useColumns } from "./columns";
import "plus-pro-components/es/components/search/style/css";
import {
  PlusSearch,
  PlusDialogForm,
  type PlusColumn,
  type FieldValues
} from "plus-pro-components";
import { ElMessage } from "element-plus";
import { router } from "@/router";
import { setUser } from "@/api/user";
import { getCoopDetail, updateCoop } from "@/api/common";
import { useMenu } from "@/utils/power";
const power = useMenu(["info"]);
defineOptions({
  name: "OperateCooperate"
});

const searchColumns: PlusColumn[] = [
  {
    label: "搜索",
    width: 200,
    prop: "keyWord",
    valueType: "copy",
    tooltip: "请输入搜索关键词"
  },
  {
    label: "产品",
    prop: "key",
    labelWidth: 120,
    valueType: "select",
    options: [
      {
        label: "云盒",
        value: "yh",
        color: "red"
      },
      {
        label: "水机",
        value: "sj",
        color: "red"
      },
      {
        label: "充电宝",
        value: "cdb",
        color: "red"
      }
    ]
  }
];

const defaultSearchState = ref({});

const {
  loading,
  columns,
  dataList,
  pagination,
  loadingConfig,
  adaptiveConfig,
  onSizeChange,
  loadData,
  onKeywordChange,
  onCurrentChange
} = useColumns();

const columnsRef = computed(() => {
  if (power.value.info) {
    return columns;
  }
  const columnsCopy = [...columns];
  return columnsCopy.slice(0, -1);
});

function detailClick(row) {
  console.log(
    "%crow===详情>>>: ",
    "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
    row
  );
  router.push({ name: "UserDetail", query: { id: row.id } });
}

const rules = {};
const formColumns: PlusColumn[] = [
  {
    label: "合作ID",
    prop: "cId"
  },
  {
    label: "产品",
    prop: "key"
  },
  {
    label: "姓名",
    prop: "userName"
  },
  {
    label: "手机号",
    prop: "userMobile"
  },
  {
    label: "投资意向",
    prop: "amount"
  },
  {
    label: "联系地址",
    prop: "address"
  },

  { label: "备注", prop: "remarks" },
  {
    label: "状态",
    prop: "status",
    labelWidth: 120,
    valueType: "select",
    options: [
      {
        label: "待对接",
        value: 0,
        color: "red"
      },
      {
        label: "已安排",
        value: 1,
        color: "red"
      },
      {
        label: "已反馈",
        value: 2,
        color: "red"
      }
    ]
  },
  {
    label: "对接人",
    prop: "dockAdmin"
  },
  {
    label: "反馈信息",
    prop: "dockBack"
  }
];
const visible = ref(false);
const values = ref<FieldValues>({});
const confirmLoading = ref(false);
async function editClick(row) {
  console.log(
    "%crow===编辑>>>: ",
    "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
    row
  );

  try {
    const res = await getCoopDetail({ cId: row.cId });
    values.value = res.data;
    visible.value = true;
  } catch (error) {
    console.log(error, "error");
  }
}

const handleSubmit = async (value: FieldValues) => {
  const updatedValues = { ...values.value };
  console.log("updatedValues", updatedValues);

  confirmLoading.value = true;
  const params = {
    cId: updatedValues.cId,
    status: updatedValues.status
  };
  if (updatedValues.status == 1) {
    params.dockAdmin = updatedValues.dockAdmin;
  } else if (updatedValues.status == 2) {
    params.dockBack = updatedValues.dockBack;
  }
  try {
    const res = await updateCoop(params);
    visible.value = false;
    confirmLoading.value = false;
    formRef.value?.formInstance?.resetFields();
    ElMessage.success("处理成功");
    loadData();
  } catch (error) {
    confirmLoading.value = false;
    console.log(error, "error");
  }
};

const handleSearch = (value: any) => {
  console.log(value, "search");
  onKeywordChange(value);
};
const handleReset = value => {
  console.log("reset");
  onKeywordChange(value);
};

const handleChange = (value: any, target: any) => {
  console.log("change", value);
  if (target.prop == "keyWord") {
    return;
  }
  onKeywordChange(value);
};
const formRef = ref();
</script>

<template>
  <ElCard>
    <template #header>
      <ElPageHeader :icon="null">
        <template #title>
          <h3>商务合作</h3>
        </template>
        <PlusSearch
          :defaultValues="defaultSearchState"
          class="mt-5"
          :columns="searchColumns"
          :hasUnfold="false"
          @reset="handleReset"
          @search="handleSearch"
          @change="handleChange"
        />
      </ElPageHeader>
    </template>
    <pure-table
      ref="tableRef"
      showOverflowTooltip
      border
      adaptive
      :adaptiveConfig="adaptiveConfig"
      row-key="id"
      alignWhole="center"
      :loading="loading"
      :loading-config="loadingConfig"
      :data="dataList"
      :columns="columnsRef"
      :pagination="pagination"
      @page-size-change="onSizeChange"
      @page-current-change="onCurrentChange"
    >
      <template #status="{ row }">
        <el-tag v-if="row.status == 1" type="success">已安排</el-tag>
        <el-tag v-else-if="row.status == 2" type="primary">已反馈</el-tag>
        <el-tag v-else type="danger">待对接</el-tag>
      </template>
      <template v-if="power.info" #operation="{ row }">
        <el-button type="primary" size="small" @click="editClick(row)"
          >详情</el-button
        >
      </template>
    </pure-table>
    <PlusDialogForm
      ref="formRef"
      v-model:visible="visible"
      v-model="values"
      :form="{ columns: formColumns, rules, labelWidth: 120 }"
      :dialog="{ confirmLoading }"
      title="处理用户反馈"
      @confirm="handleSubmit"
    >
      <template #plus-field-cId>
        <span>{{ values.cId }}</span>
      </template>
      <template #plus-field-key>
        <span>{{ { yh: "云盒", sj: "水机", cdb: "充电宝" }[values.key] }}</span>
      </template>
      <template #plus-field-userName>
        <span>{{ values.userName }}</span>
      </template>
      <template #plus-field-userMobile>
        <span>{{ values.userMobile }}</span>
      </template>
      <template #plus-field-amount>
        <span>{{ values.amount }}</span>
      </template>
      <template #plus-field-remarks>
        <span>{{ values.remarks }}</span>
      </template>
      <template #plus-field-address>
        <span>{{ values.address }}</span>
      </template>
      <template #plus-field-dockAdmin>
        <el-input
          v-model="values.dockAdmin"
          :disabled="values.status != 1"
          placeholder="请输入对接人"
        />
      </template>
      <template #plus-field-dockBack>
        <el-input
          v-model="values.dockBack"
          type="textarea"
          :disabled="values.status != 2"
          placeholder="请输入反馈信息"
        />
      </template>

      <!-- <template #plus-field-status>
        <el-tag v-if="values.status == 1" type="success">已安排</el-tag>
        <el-tag v-else-if="values.status == 2" type="primary">已反馈</el-tag>
        <el-tag v-else type="danger">待对接</el-tag>
      </template> -->
    </PlusDialogForm>
  </ElCard>
</template>

<style scoped></style>
